<template>
  <div class="stage-com">
    <div
      class="stage-text"
      :class="{dotted: i, on: projectStage === key}"
      v-for="(value,key, i) in EnumProjectPhase"
      :key="key"
    >{{ value }}</div>
  </div>
</template>

<script>
export default {
  name: 'stageCom',
  props: {
    EnumProjectPhase: {
      type: Object,
      default: () => {
        return {
          ProjectApproval: '立项阶段',
          Prepare: '准备阶段',
          BidTender: '招标阶段',
          StartWork: '开工阶段',
        }
      }
    },
    projectStage: {
      type: String,
      default: '',
    }
  },
  data () {
    return {

    }
  }
}
</script>

<style lang='less' scoped>
.stage-com {
  display: flex;
  align-items: center;
  line-height: 21px;
  font-weight: 500;
  font-size: 16px;

  .stage-text {
    position: relative;
    padding: 2px 5px;
    color: #86909c;
    &:nth-of-type(n + 2) {
      margin-left: 40px;
    }
    &.on {
      border-radius: 5px;
      border: 1px solid #2d8cf0;
      color: #2d8cf0;
    }
  }
  .dotted::after {
    content: '';
    position: absolute;
    top: 12px;
    left: -35px;
    width: 30px;
    height: 0px;
    border-bottom: 2px dotted #86909c;
  }
  .on.dotted::after {
    border-color: #2d8cf0;
  }
}
</style>
